<template>
	<view class="childReview" :animation="animationData">
		<view class="top-comment">
			<item @review="review" :reviewMsg="topComment"></item>
		</view>
		<scroll-view scroll-y="true" :style="getHeight">
			<view v-for="(titem, key) in currentChildData" :key="titem">

				<item @review="review" :reviewMsg="titem"></item>

			</view>
		</scroll-view>
		<comment @submit="submit" :textAreaPlace="textAreaPlace" ref="comment" propCommentText="回复评论..." />
	</view>
</template>

<script>
	import item from '@/components/work/comment-detail-item.vue';
	import comment from "@/components/work/comment.vue";
	import commentMapper from "@/mapper/work/comment.js";
	export default {
		components: {
			item,
			comment
		},
		props: {
			reviewMsg: Array
		},
		computed: {
			getHeight() {
				return `height: ${uni.upx2px(1334-233-124-96)}px`

			}
		},
		onLoad({
			commentData,
			topic_id
		}) {
			this.initData(commentData, topic_id)
		},
		data() {
			return {
				textAreaPlace: '',
				topComment: {},
				currentChildData: [],
				submitData: {
					content: '',
					top_id: '',
					parent_id: ''
				},
			};
		},
		methods: {
			review(reviewMsg) {
				this.textAreaPlace = reviewMsg.reply.nickname;
				this.submitData.parent_id = reviewMsg.user_id;

				this.$refs.comment.focus()
			},
			initData(commentData, topic_id) {
				this.topComment = JSON.parse(decodeURIComponent(commentData))
				this.currentChildData = this.formatData();
				this.textAreaPlace = this.topComment.user.nickname;
				this.submitData.top_id = topic_id;
				this.submitData.parent_id = this.topComment.user_id;
			},
			formatData() {
				let target = [];

				function each(topComment) {
					target.push(topComment)
					if (!topComment.messages) return;
					topComment.messages.forEach(review => {
						each(review)

					})
				}
				each(this.topComment)
				return target
			},
			async submit(content) {
				if (!content) {
					return uni.showToast({
						title: '请输入你要发送的消息~',
						icon: 'none'
					});
				}
				this.submitData.content = content;
				uni.showLoading({
					title: '评论中...'
				})
				// api 保存评论
				this.submitData.content = content;
				let data = await commentMapper.reply(this.submitData);
				uni.hideLoading();
				uni.navigateTo({
					url: 'work/work_detail/work_detail?workIndex='+this.topic_id
				})
			}
		},
		mounted() {
			this.textAreaPlace = this.topComment.userName
		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F1F1;
	}

	.comment-area {
		background-color: rgba(247, 247, 247, 1) !important;

		>.input {
			background: #fff !important;
		}
	}

	.top-comment {
		margin-bottom: 20upx;
	}
</style>
